<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>用户注册-成都华联</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="layui/css/layui.css" media="all">
        <script src="layui/layui.js" charset="utf-8"></script>
        <script>var $ = layui.jquery;</script>
    </head>
    <body>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>用户注册</legend>
        </fieldset>
        <div class="layui-input-block layui-form" id="modifyClass"
             lay-filter="updateClass" style="margin: 20px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入姓名" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" lay-verify="required|phone" placeholder="请输入手机号"
                               autocomplete="off" id="phoneInput"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生日</label>
                    <div class="layui-input-inline">
                        <input type="text" name="birth" class="layui-input"
                               id="test1" lay-verify="required|date" placeholder="请选择生日">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="sex" value="男" title="男" checked="">
                        <input type="radio" name="sex" value="女" title="女">
                    </div>
                </div>
                <div class="layui-form-item" style="text-align: center;margin: 0 50px">
                    <input type="text" name="code"
                           lay-verify="required|number" placeholder="验证码"
                           class="layui-input" id="codeInput">
                    <button type="button" id="btnSendCode" style="margin-top: 15px"
                            class="layui-btn layui-btn-normal">发送验证码
                    </button>
                </div>
                <div class="layui-form-item" style="margin-top: 80px;">
                    <div class="layui-form-item" style="text-align: center">
                        <input type="checkbox" name="agree" lay-filter="choiceMust"
                               lay-skin="primary" title="同意《协议条款》"
                               autocomplete="off" lay-verify="required">
                        <!--<div class="layui-form-mid layui-word-aux">《协议条款》</div>-->
                    </div>
                    <div class="layui-form-item" style="text-align: center">
                        <button class="layui-btn layui-btn-disabled" disabled="disabled"
                                id="regBtn" lay-submit="" lay-filter="regBtn">注册
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <script>
            layui.use(['form', 'layedit', 'laydate'], function () {
                var form = layui.form
                    , layer = layui.layer
                    , laydate = layui.laydate;

                //日期的方法渲染
                laydate.render({
                    elem: '#test1'
                });

                var InterValObj; //timer变量，控制时间
                var count = 5; //间隔函数，1秒执行
                var curCount;//当前剩余秒数

                // 监听发送验证码按钮
                $("#btnSendCode").on('click', function () {
                    /*验证输入的手机号码*/
                    var mobile = /^1[3|4|5|7|8|9]\d{9}$/;
                    var phone = $("#phoneInput").val();
                    if (mobile.test(phone)) {
                        sendCode();
                    } else {
                        layer.msg("请输入正确的手机号！")
                    }
                });

                //监听同意按钮
                form.on('checkbox(choiceMust)', function (data) {
                    if (data.elem.checked) {
                        //选中，注册按钮可点击
                        $("#regBtn").attr("disabled", false);
                        $("#regBtn").removeClass("layui-btn-disabled");
                    }else{
                        //未选中，注册按钮不可点击
                        $("#regBtn").attr("disabled", true);
                        $("#regBtn").addClass("layui-btn-disabled");
                    }
                });

                //监听提交
                form.on('submit(regBtn)', function (data) {
                    //先判断是否勾选了同意
                    if (data.field.agree == "on") {
                        /*layer.alert(JSON.stringify(data.field), {
                            title: '最终的提交信息'
                        })
                        return false;*/
                        $.ajax({
                            url: "/user"
                            , type: "post"
                            , headers: {"method": "reg"}
                            , data: {
                                "formData": JSON.stringify(data.field),
                                "code": $("#codeInput").val()
                            }
                            , dataType: "json"
                            , success: function (result) {
                                if (result.code == 0) {
                                    // 跳转到登录页
                                    window.location.href = "/userLogin.html";
                                    layer.msg(result.msg, {icon: 6, offset: "auto", time: 1000});//提示框
                                } else if (result.code == 1) {
                                    //置空验证码输入框
                                    $('#codeInput').val("");
                                    layer.msg(result.msg, {icon: 5, offset: "auto", time: 1000});
                                }
                            }
                            , error: function () {
                                $('#codeInput').val("");
                                layer.msg("发生未知错误", {icon: 5, offset: "auto", time: 1000});
                            }
                        })
                        return false;
                    } else {
                        layer.alert("请勾选同意《协议条款》！")
                        return false;
                    }
                });

                // 发送验证码的方法
                function sendCode() {
                    /*给倒计时赋初值*/
                    curCount = count;
                    //置空验证码输入框
                    $('#codeInput').val("");
                    $.ajax({
                        url: "/sendCode"
                        , type: "post"
                        , data: {
                            "phone": $("#phoneInput").val()
                        }
                        , dataType: "json"
                        , success: function (result) {
                            if (result.code == 0) {
                                layer.msg(result.msg, {icon: 6, offset: "auto", time: 1000});
                                /*设置按钮禁用+变色+倒计时*/
                                $('#btnSendCode').attr("disabled", "true");
                                $('#btnSendCode').addClass('layui-btn-disabled');
                                $('#btnSendCode').text(curCount + "秒后重获");
                                // 启动计时器timer处理函数，1秒执行一次
                                InterValObj = window.setInterval(SetRemainTime, 1000);
                            } else if (result.code == 1) {
                                layer.msg(result.msg, {icon: 5, offset: "auto", time: 1000});
                            }
                        }
                        , error: function () {
                            layer.msg("发生未知错误", {icon: 5, offset: "auto", time: 1000});
                        }
                    })
                }

                //timer处理函数
                function SetRemainTime() {
                    if (curCount == 0) {
                        $('#btnSendCode').removeClass('layui-btn-disabled');
                        $('#btnSendCode').text("重获验证码");
                        window.clearInterval(InterValObj);// 停止计时器
                        $('#btnSendCode').removeAttr("disabled");
                    } else {
                        curCount--;
                        $('#btnSendCode').text(curCount + "秒后重获");
                    }
                }

            });
        </script>
    </body>
</html>